<template>
  <MyCard>
    <el-page-header :icon="ArrowLeft" @back="backCouponList">
      <template #content>
        <span class="text-large font-600 mr-3"> 修改优惠卷 </span>
      </template>
    </el-page-header>
  </MyCard>
  <MyCard>
    <el-form label-width="160px">
      <el-form-item label="优惠卷名称:">
        <el-input placeholder="请输入优惠卷名称" show-word-limit maxlength="18" v-model="formItem.name">
        </el-input>
      </el-form-item>
      <el-form-item label="优惠卷面值:">
        <el-input v-model="formItem.price">
          <template #suffix>
            <span>元</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="用户类型:">
        <div class="textDescription">
          <el-radio-group v-model="formItem.get_time_limit">
            <el-radio v-for="item in userTypeData.rows" :key="item._id" :value="item.name == '普通用户' ? 0 : 1">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
          <p v-for="item in userTypeData.rows" :key="item._id">
            {{ item.name }}: {{ item.intro }}
          </p>
        </div>
      </el-form-item>
      <el-form-item label="发送方式:">
        <div class="textDescription">
          <el-radio-group v-model="formItem.sendWayId">
            <el-radio v-for="item in couponSendWayData.rows" :key="item._id" :value="item._id">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
          <p v-for="item in couponSendWayData.rows" :key="item._id">
            {{ item.name }}: {{ item.intro }}
          </p>
        </div>
      </el-form-item>
      <el-form-item>
        <el-radio-group label="优惠卷类型:" v-model="formItem.typeId">
          <el-radio v-for="item in groupTypeData.rows" :key="item._id" :value="item._id">
            {{ item.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="使用门槛">
        <div class="textDescription">
          <el-radio-group v-model="formItem.use_sill">
            <el-radio v-for="item in useSillData" :key="item.value" :value="item.value">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
          <template v-if="formItem.use_sill == 1">
            <div>
              <el-input v-model="formItem.min_price">
                <template #suffix>
                  <span>元</span>
                </template>
              </el-input>
            </div>
            <p>填写优惠券的最低消费金额</p>
          </template>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addCoupon">立即创建</el-button>
      </el-form-item>
    </el-form>
  </MyCard>
</template>

<script setup lang="ts">
import { addCouponApi, type CouponSendWayItemLimit } from '@/api/coupon';
import { useFindData } from '@/composables/findData';
import { ArrowLeft } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const formItem = ref<Partial<CouponSendWayItemLimit>>({});
// onUnmounted(() => {
//   console.log('添加销毁');

// })
onMounted(() => {
  getCouponSendWayJoint();
  getUserTypeJoint();
  getGroupTypeJoint();
})
const useSillData: { value: number, name: string }[] = [
  { value: 0, name: '无门槛' },
  { value: 1, name: '有门槛' },
];
const { couponSendWayData, getCouponSendWayJoint, userTypeData, getUserTypeJoint, groupTypeData, getGroupTypeJoint } = useFindData();
function backCouponList() {
  router.push('/admin/marketing/store_coupon_issue/index')
}
function addCoupon() {
  addCouponApi(formItem.value);
}
</script>

<style scoped>
.el-input {
  width: 410px;
}

.textDescription {
  color: #888;
  font-size: 12px;
  line-height: 16px;
}
</style>